iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

Ruby菜鳥村村民遊記系列 第 25

遊記ep.25 Control Zoom and Pan in Google村

  • 分享至 

  • xImage
  •  

今天想介紹一下控制 Google Map 的幾個因素~
先來看看今天的程式碼:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var locationRio = {lat: 23.5, lng: 121};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: locationRio,
          gestureHandling: 'cooperative'
        });
        var marker = new google.maps.Marker({
          position: locationRio,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

今天的主角主要是要介紹gestureHandling這個屬性
他是一個讓開發者可以去設定如何跟地圖做互動的手勢屬性,
而範例中選用的屬性值是cooperative
根據官方文件提供的說明:cooperative 設定了這個屬性
他可以預防使用者使用單指來平移 map,單指可以捲動頁面 若需要平移地圖則需要兩隻手指才行
但老實說自己實測的時候,單指按住後拖曳地圖一樣可以平移整個 Google Map,
主機是 mac,或者這個是針對手機平板等觸碰螢幕才有效呢?
如果有同好了解的話,也歡迎來討論一下~

gestureHandling: 'none'

設定了 none 之後,就只能看到一個死板板的地圖,
沒辦法拖曳平移也沒辦法放大縮小。

gestureHandling: 'greedy'

這個設定則跟cooperative是相反的,
用一指也可以來平移畫面,當我實測主機是 mac 時,
原本兩指上下滑動要配上 command 鍵才能夠縮放,
現在只要將鼠標放在地圖上,直接上下兩指滑動就可以縮放地圖了!

今天的介紹就到這裡了,希望有幫到需要的你~
今天,你把玩 Google Map 了嗎?:)

參考文件:
Google Map 官方文件


上一篇
遊記ep.24 動態改變 in Google村
下一篇
遊記ep.26 舞い躍る ! Marker ! in Google村
系列文
Ruby菜鳥村村民遊記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言